<template>
  <div>
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-input v-model="listQuery.nickName" style="width:200px;" placeholder="用户名" @keyup.enter.native="handleFilter"/>
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
    </div>

    <el-table :data="recommendTeacherList" border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column min-width="10%" align="center" label="顺序号">
        <template slot-scope="scope">
          <span>{{ scope.row.promotedSeq }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="推荐时间">
        <template slot-scope="scope">
          <span>{{ scope.row.promotedTime }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="查看记录">
        <template slot-scope="scope">
          <el-button type="primary" @click="dialog.addMoreUser = true ; moreUserForm.teacherId = scope.row.id ">设置序号</el-button>
          <el-button type="primary" @click="cancelRecommend(scope.row)">取消推荐</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRecommendTeacherListData"/>

    <el-dialog :visible.sync="dialog.addMoreUser" title="设置推荐教师" width="580px">
      <el-form :model="moreUserForm" :rules="rules" ref="moreUserForm">
        <el-form-item :label-width="formLabelWidth" label="序号" prop="number">
          <el-input v-model="moreUserForm.number" style="width:300px;"/>
          <p style="margin:0;">请输入长度不能超过8位的整数</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addMoreUser = false">取 消</el-button>
        <el-button type="primary" @click="promotedTeacher()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination' // 分页组件
  import {getEduxcloudTeacherPager, updateEducloudTeacherPromoted} from '@/api/user/user' // 数据接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {Pagination},
    data() {
      return {
        formLabelWidth: '',
        recommendTeacherList: null,
        total: 0,
        listLoading: true,
        listQuery: {
          promoted: '1',
          nickName: '',
          tenantId: getTenantId(),
          page: 1,
          limit: 20
        },
        dialog: {
          addMoreUser: false
        },
        moreUserForm: {
          number: ''

        },
        rules: {
          number: [
            {required: true, message: '必填信息', trigger: 'blur'},
            {min: 1, max: 8, message: '长度不能超过8位', trigger: 'blur'},
            {pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入长度不能超过8位的整数'}
          ]
        }
      }
    },
    created() {
      this.getRecommendTeacherListData()
    },
    methods: {
      // 接口获取数据
      getRecommendTeacherListData() {
        getEduxcloudTeacherPager(this.listQuery).then(response => {
          this.recommendTeacherList = response.data.items;
          this.total = response.data.total
        })
      },
      // 数据检索
      handleFilter() {
        this.getRecommendTeacherListData()
      },
      clearParams() {
        this.listQuery = {
          promoted: '1',
          nickName: '',
          tenantId: getTenantId(),
          page: 1,
          limit: 20
        };
        this.getRecommendTeacherListData()
      },
      promotedTeacher() {

        this.$refs.moreUserForm.validate((valid) => {
          if (valid) {
            this.dialog.addMoreUser = false;
            const teacherPromoted = {'id': this.moreUserForm.teacherId, 'promoted': '1', 'promotedSeq': this.moreUserForm.number};
            updateEducloudTeacherPromoted(teacherPromoted).then(() => {
              this.moreUserForm.number = '';
              this.$notify({title: '成功', message: '推荐序号修改成功', type: 'success', duration: 2000});
              this.getRecommendTeacherListData()
            })
          } else {
            return false
          }
        })
      },
      cancelRecommend(teacher) {
        this.$confirm(`确定取消推荐吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const teacherPromoted = {'id': teacher.id, 'promoted': '0', 'promotedSeq': '0'};
          updateEducloudTeacherPromoted(teacherPromoted).then(() => {
            this.moreUserForm.number = '';
            this.$notify({title: '成功', message: '取消推荐成功', type: 'success', duration: 2000});
            this.getRecommendTeacherListData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '放弃取消'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .allsearch {
    margin-top: 0;
    padding: 0;

    .search-content {
      width: 100%;
    }
  }
</style>
